<template>
  <div class="header">
     <div id="box1">
        <img src="../../public/assets/weipinhui.png" width="160">
        <div id="zp">
            <span>品牌特卖·100%正品</span>
            <span class="dl">登录</span>
        </div>
        <img src="../../public/assets/caidan.svg" width="24p">
     </div> 
      <div id="box2">
        <input type="text" value="女休闲鞋">
      </div>
     <div class="daohang">
        <router-link to="/base" active-class="color">推荐</router-link>
        <router-link to="/adv" active-class="color" >3折疯抢</router-link>
        <router-link to="/three" active-class="color">唯品快抢</router-link>
        <router-link to="/four" active-class="color">国际</router-link>
     </div>
     <div class="ly">
       <!-- <keep-alive :include="include">
          <router-view></router-view>
       </keep-alive> -->
       <keep-alive>
          <router-view v-if="$route.meta.keepalive"></router-view>
       </keep-alive>
        <router-view v-if="!$route.meta.keepalive"></router-view>
     </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderBase',
  data(){
    return {
      include:'AdvList'
    }
  },
  props: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .ly{
   background-color: #F1F3F4;
   width: 466px;
   /* height: 808px; */
   margin: 0 auto;
   border: 1px solid #ddd;
}

 .daohang {
     background-color: #fff;
     margin-bottom: 13px;
}
 .color{
     color: #E04F9F;
     border-bottom: 3px solid #E04F9F;
     padding-bottom: 5px;
 }
  .header {
    background-color: #fff;
  }
  #zp {
    border-left: 1px solid #ddd;
    color: #C5CACC;
    padding-left: 8px;
    height: 23px;
    margin-top: 10px;
  }
  .dl {
    color: #7C7F85;
    margin-left: 59px;
    padding-right: 15px;
  }
  #box2>input {
      width: 420px;
      height: 30px;
      border-radius: 30px;
      border: 2px solid #ddd;
      background-color: #F1F1F0; 
      padding-left: 10px;
      margin-bottom: 15px;
      color: #AAAAB0;
      outline: none;
    }
  #box1,#box2 {
    display: flex;
    justify-content: center;
  }
  #box1>img {
    margin-right: 5px;
    margin-bottom: 6px;
  }

</style>
